<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax001</title>
</head>
<body>
<button id="btn">详情</button>
<span id="mySpan"></span>
<br>
<br>
<br>
<input name="userName" id="userName"><br>
<input name="passWord" id="passWord"><br>
</body>

<script type="text/javascript">
    window.onload = function () {
        console.log("页面加载完毕！")
        document.getElementById("btn").onclick = function () {
            var userName = document.getElementById("userName").value;
            var passWord = document.getElementById("passWord").value;
            console.log("检测到鼠标单击！")
            var request = new XMLHttpRequest();
            request.onreadystatechange = function () {
                if (request.readyState == 4) {
                    if (request.status == 200) {
                        var text = request.responseText;
                        document.getElementById("mySpan").innerHTML = text;
                    } else {
                        alert("发生错误！")
                    }
                }
            }
            request.open("get", "/ajax/request01?userName="+userName+"&passWord="+passWord, true);
            request.send();
        }
    }
</script>
</html>